<template>
  <div :class="prefixCls" class="login-background-img" style="background-color: #0c8485">
    <Particles id="tsparticles" class="login__particles" :options="particlesOptions" />

    <!-- <AppLocalePicker class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false" />
    <AppDarkModeToggle class="absolute top-3 right-7 enter-x" /> -->
    <!-- <div class="aui-logo" v-if="!getIsMobile">
      <div>
        <h3>
          <img :src="logoImg" alt="jeecg" />
        </h3>
      </div>
    </div>
    <div v-else class="aui-phone-logo">
      <img :src="logoImg" alt="jeecg" />
    </div> -->
    <div class="aui-content" style="position: relative; z-index: 20">
      <div style="padding-top: 4%">
        <div
          style="
            color: #fff;
            font-size: 60px;
            text-align: center;
            text-shadow: 6px 6px 12px rgba(0, 0, 0, 0.8);
            letter-spacing: 14px;
            font-family: 'Source Han Sans', 'Arial', sans-serif;
          "
          >学生热水收费和宿舍用电综合分析系统</div
        >
        <!-- <div style="color: #fff; font-size: 18px; text-align: center; letter-spacing: 3px; margin-top: 10px"
          >上海电力大学(临港校区)</div
        > -->
      </div>
      <div class="aui-container">
        <div class="aui-form">
          <div class="aui-formBox">
            <div class="aui-formWell">
              <div class="aui-flex aui-form-nav investment_title">
                <div class="aui-flex-box">{{ t('sys.login.signInFormTitle') }} </div>
              </div>
              <div class="aui-form-box" style="height: 180px">
                <a-form ref="loginRef" :model="formData" @keyup.enter.native="accountLogin">
                  <div class="aui-account">
                    <div class="aui-inputClear">
                      <i class="icon icon-code"></i>
                      <a-form-item>
                        <a-input class="fix-auto-fill" :placeholder="t('sys.login.userName')" v-model:value="formData.username" />
                      </a-form-item>
                    </div>
                    <div class="aui-inputClear">
                      <i class="icon icon-password"></i>
                      <a-form-item>
                        <a-input class="fix-auto-fill" type="password" :placeholder="t('sys.login.password')" v-model:value="formData.password" />
                      </a-form-item>
                    </div>
                    <div class="aui-inputClear">
                      <i class="icon icon-code"></i>
                      <a-form-item>
                        <a-input class="fix-auto-fill" type="text" :placeholder="t('sys.login.inputCode')" v-model:value="formData.inputCode" />
                      </a-form-item>
                      <div class="aui-code">
                        <img v-if="randCodeData.requestCodeSuccess" :src="randCodeData.randCodeImage" @click="handleChangeCheckCode" />
                        <img v-else style="margin-top: 2px; max-width: initial" :src="codeImg" @click="handleChangeCheckCode" />
                      </div>
                    </div>
                    <div class="aui-flex">
                      <div class="aui-flex-box">
                        <div class="aui-choice">
                          <a-input class="fix-auto-fill" type="checkbox" v-model:value="rememberMe" />
                          <span style="margin-left: 5px">{{ t('sys.login.rememberMe') }}</span>
                        </div>
                      </div>
                      <!-- <div class="aui-forget">
                          <a @click="forgetHandelClick"> {{ t('sys.login.forgetPassword') }}</a>
                        </div> -->
                    </div>
                  </div>
                </a-form>
              </div>
              <div class="aui-formButton">
                <div class="aui-flex">
                  <a-button :loading="loginLoading" class="aui-link-login" type="primary" @click="accountLogin">
                    {{ t('sys.login.loginButton') }}</a-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="login-mini">
  import { getCodeInfo } from '/@/api/sys/user';
  import { onMounted, reactive, ref, toRaw } from 'vue';
  import codeImg from '/@/assets/images/checkcode.png';
  import { useUserStore } from '/@/store/modules/user';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
  import { useDesign } from '/@/hooks/web/useDesign';
  import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png';
  import { useAppInject } from '/@/hooks/web/useAppInject';
  const { prefixCls } = useDesign('mini-login');
  const { notification, createMessage } = useMessage();
  const userStore = useUserStore();
  const { t } = useI18n();
  const randCodeData = reactive<any>({
    randCodeImage: '',
    requestCodeSuccess: false,
    checkKey: null,
  });
  const rememberMe = ref<string>('0');
  const { getIsMobile } = useAppInject();
  //账号登录表单字段
  const formData = reactive<any>({
    inputCode: '',
    username: '',
    password: '',
  });
  const loginRef = ref();
  const loginLoading = ref<boolean>(false);

  const particlesOptions = {
    fpsLimit: 60,
    interactivity: {
      detectsOn: 'canvas',
      events: {
        onClick: {
          // 开启鼠标点击的效果
          enable: true,
          mode: 'push',
        },
        onHover: {
          // 开启鼠标悬浮的效果(线条跟着鼠标移动)
          enable: true,
          mode: 'grab',
        },
        resize: true,
      },
      modes: {
        // 配置动画效果
        bubble: {
          distance: 400,
          duration: 2,
          opacity: 0.8,
          size: 40,
        },
        push: {
          quantity: 4,
        },
        grab: {
          distance: 200,
          duration: 0.4,
        },
        attract: {
          // 鼠标悬浮时，集中于一点，鼠标移开时释放产生涟漪效果
          distance: 200,
          duration: 0.4,
          factor: 5,
        },
      },
    },
    particles: {
      color: {
        value: '#BA55D3', // 粒子点的颜色
      },
      links: {
        color: '#FFBBFF', // 线条颜色
        distance: 150, //线条距离
        enable: true,
        opacity: 0.4, // 不透明度
        width: 1.2, // 线条宽度
      },
      collisions: {
        enable: true,
      },
      move: {
        attract: { enable: false, rotateX: 600, rotateY: 1200 },
        bounce: false,
        direction: 'none',
        enable: true,
        out_mode: 'out',
        random: false,
        speed: 0.5, // 移动速度
        straight: false,
      },
      number: {
        density: {
          enable: true,
          value_area: 800,
        },
        value: 100, //粒子数
      },
      opacity: {
        //粒子透明度
        value: 0.7,
      },
      shape: {
        //粒子样式
        // type: 'circle',
        // type: 'edge',
        type: 'triangle',
        // type: 'polygon',
        // type: 'star',
      },
      size: {
        //粒子大小
        random: true,
        value: 3,
      },
    },
    detectRetina: true,
  };

  defineProps({
    sessionTimeout: {
      type: Boolean,
    },
  });

  /**
   * 获取验证码
   */
  function handleChangeCheckCode() {
    formData.inputCode = '';

    randCodeData.checkKey = 1629428467008;
    getCodeInfo(randCodeData.checkKey).then((res) => {
      randCodeData.randCodeImage = res;
      randCodeData.requestCodeSuccess = true;
    });
  }

  /**
   * 账号登录
   */
  async function accountLogin() {
    if (!formData.username) {
      createMessage.warn(t('sys.login.accountPlaceholder'));
      return;
    }
    if (!formData.password) {
      createMessage.warn(t('sys.login.passwordPlaceholder'));
      return;
    }
    try {
      loginLoading.value = true;
      const { userInfo } = await userStore.login(
        toRaw({
          password: formData.password,
          username: formData.username,
          captcha: formData.inputCode,
          checkKey: randCodeData.checkKey,
          mode: 'none', //不要默认的错误提示
        })
      );
      if (userInfo) {
        notification.success({
          message: t('sys.login.loginSuccessTitle'),
          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
          duration: 3,
        });
      }
    } catch (error) {
      notification.error({
        message: t('sys.api.errorTip'),
        description: error.message || t('sys.login.networkExceptionMsg'),
        duration: 3,
      });
      handleChangeCheckCode();
    } finally {
      loginLoading.value = false;
    }
  }

  onMounted(() => {
    //加载验证码
    handleChangeCheckCode();
  });
</script>

<style lang="less" scoped>
  @import '/@/assets/loginmini/style/home.less';
  @import '/@/assets/loginmini/style/base.less';

  :deep(.ant-input:focus) {
    box-shadow: none;
  }
  .aui-get-code {
    float: right;
    position: relative;
    z-index: 3;
    background: #ffffff;
    color: #1573e9;
    border-radius: 100px;
    padding: 5px 16px;
    margin: 7px;
    border: 1px solid #1573e9;
    top: 12px;
  }

  .aui-get-code:hover {
    color: #1573e9;
  }

  .code-shape {
    border-color: #dadada !important;
    color: #aaa !important;
  }

  :deep(.jeecg-dark-switch) {
    position: absolute;
    margin-right: 10px;
  }
  .aui-link-login {
    height: 42px;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 8px;
    flex: 1;
    color: #fff;
    margin-top: 40px;
  }
  .aui-phone-logo {
    position: absolute;
    margin-left: 10px;
    width: 60px;
    top: 2px;
    z-index: 4;
  }
  .top-3 {
    top: 0.45rem;
  }
</style>

<style lang="less">
  @prefix-cls: ~'@{namespace}-mini-login';
  @dark-bg: #293146;

  html[data-theme='dark'] {
    .@{prefix-cls} {
      background-color: @dark-bg !important;
      background-image: none;

      &::before {
        background-image: url(/@/assets/svg/login-bg-dark.svg);
      }
      .aui-inputClear {
        background-color: #232a3b !important;
      }
      .ant-input,
      .ant-input-password {
        background-color: #232a3b !important;
      }

      .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
        border: 1px solid #4a5569 !important;
      }

      &-form {
        background: @dark-bg !important;
      }

      .app-iconify {
        color: #fff !important;
      }
      .aui-inputClear input,
      .aui-input-line input,
      .aui-choice {
        color: #c9d1d9 !important;
      }

      .aui-formBox {
        background-color: @dark-bg !important;
      }
      .aui-third-text span {
        background-color: @dark-bg !important;
      }
      .aui-form-nav .aui-flex-box {
        color: #c9d1d9 !important;
      }

      .aui-formButton .aui-linek-code {
        background: @dark-bg !important;
        color: white !important;
      }
      .aui-code-line {
        border-left: none !important;
      }
      .ant-checkbox-inner,
      .aui-success h3 {
        border-color: #c9d1d9;
      }
      //update-begin---author:wangshuai ---date:20230828  for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------
      &-sign-in-way {
        .anticon {
          font-size: 22px !important;
          color: #888 !important;
          cursor: pointer !important;

          &:hover {
            color: @primary-color !important;
          }
        }
      }
      //update-end---author:wangshuai ---date:20230828  for：【QQYUN-6363】这个样式代码有问题，不在里面，导致表达式有问题------------
    }

    input.fix-auto-fill,
    .fix-auto-fill input {
      -webkit-text-fill-color: #c9d1d9 !important;
      box-shadow: inherit !important;
    }

    .ant-divider-inner-text {
      font-size: 12px !important;
      color: @text-color-secondary !important;
    }
    .aui-third-login a {
      background: transparent;
    }
  }

  .login__particles {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('/@/assets/loginmini/icon/jeecg_bg3.jpg');
    opacity: 0.9;
    position: fixed;
    pointer-events: none;
  }
</style>
